diff options
Diffstat (limited to 'src/routes/grocery/[id]/+page.svelte')
| -rw-r--r-- | src/routes/grocery/[id]/+page.svelte | 170 |
1 files changed, 28 insertions, 142 deletions
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte index c3c3706..a49d037 100644 --- a/src/routes/grocery/[id]/+page.svelte +++ b/src/routes/grocery/[id]/+page.svelte @@ -1,7 +1,5 @@ <script lang="ts"> - import '../../../app.css'; import { enhance } from '$app/forms'; - import { page } from '$app/stores'; let { data, form } = $props(); let reference = $state(''); @@ -20,10 +18,11 @@ <h2>Références</h2> -<form class="add-form" method="POST" action="?/add" use:enhance> +<form class="form-card" method="POST" action="?/add" use:enhance> <label> - <span class="label">Référence</span> + <span class="form-label">Référence</span> <input + class="form-input" type="text" name="reference" bind:value={reference} @@ -33,8 +32,9 @@ </label> <div class="ref-row"> <label> - <span class="label">Prix</span> + <span class="form-label">Prix</span> <input + class="form-input" type="number" name="price" bind:value={price} @@ -43,16 +43,17 @@ /> </label> <label> - <span class="label">Unité</span> - <select name="unit" bind:value={unit}> + <span class="form-label">Unité</span> + <select class="form-select" name="unit" bind:value={unit}> <option value="€/kg">€/kg</option> <option value="€/L">€/L</option> <option value="€/u">€/u</option> </select> </label> <label> - <span class="label">Note</span> + <span class="form-label">Note</span> <input + class="form-input" type="number" name="quality_score" bind:value={qualityScore} @@ -62,7 +63,7 @@ /> </label> </div> - <button type="submit">Ajouter une référence</button> + <button class="btn-primary" type="submit">Ajouter une référence</button> </form> {#if form?.error} @@ -70,9 +71,9 @@ {/if} <form method="POST" action="?/delete" use:enhance> - <ul class="item-list"> + <ul class="item-list item-list--wide"> {#each data?.references ?? [] as ref (ref.id)} - <li class="ref-item"> + <li class="item-row item-row--ref"> <div class="ref-info"> <strong>{ref.reference}</strong> {#if ref.price} @@ -84,7 +85,13 @@ <span class="ref-detail">Note : {ref.qualityScore}/100</span> {/if} </div> - <button class="delete-btn" name="id" value={ref.id} type="submit"> + <button + class="btn-ghost" + name="id" + value={ref.id} + type="submit" + aria-label="Supprimer" + > × </button> </li> @@ -110,51 +117,6 @@ margin-top: 0.25rem; } - .add-form { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-bottom: 1.5rem; - margin-top: 0.75rem; - padding: 1rem; - background: var(--surface); - border-radius: 0.75rem; - box-shadow: 0 1px 2px var(--shadow); - } - - .add-form label { - display: flex; - flex-direction: column; - gap: 0.375rem; - } - - .label { - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--text-secondary); - } - - input, - select { - padding: 0.75rem 1rem; - border: 1.5px solid var(--border); - border-radius: 0.75rem; - font-size: 1rem; - font-family: inherit; - background: var(--bg); - transition: border-color 0.2s, box-shadow 0.2s; - min-width: 0; - } - - input:focus, - select:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15); - } - .ref-row { display: flex; gap: 0.75rem; @@ -166,65 +128,6 @@ min-width: 6rem; } - .add-form button[type='submit'] { - padding: 0.75rem 1.5rem; - border: none; - border-radius: 0.75rem; - background: var(--accent); - color: #fff; - font-size: 0.9375rem; - font-weight: 500; - align-self: flex-start; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 1px 2px var(--shadow); - } - - .add-form button[type='submit']:hover { - background: var(--accent-hover); - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2); - } - - .error { - color: var(--danger); - font-size: 0.875rem; - margin-top: -0.25rem; - margin-bottom: 0.5rem; - padding: 0.5rem 0.75rem; - background: rgba(217, 83, 79, 0.08); - border-radius: 0.5rem; - } - - hr { - border: none; - border-top: 1.5px solid var(--border); - margin: 1.5rem 0; - } - - .item-list { - list-style: none; - display: flex; - flex-direction: column; - gap: 0.5rem; - } - - .ref-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.875rem 1rem; - border-radius: 0.75rem; - background: var(--surface); - box-shadow: 0 1px 2px var(--shadow); - transition: all 0.2s ease; - } - - .ref-item:hover { - box-shadow: 0 2px 6px var(--shadow); - transform: translateY(-1px); - } - .ref-info { flex-grow: 1; display: flex; @@ -242,37 +145,20 @@ border-radius: 0.375rem; } - .delete-btn { - flex-shrink: 0; - width: 2rem; - aspect-ratio: 1; - padding: 0; - border: none; - border-radius: 0.625rem; - background: transparent; - color: var(--text-secondary); - font-size: 1.25rem; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; - } - - .delete-btn:hover { - background: rgba(217, 83, 79, 0.1); - color: var(--danger); + .error { + margin-top: -0.25rem; + margin-bottom: 0.5rem; } .empty { - color: var(--text-secondary); - font-size: 0.9375rem; margin-top: 0.75rem; - text-align: center; padding: 1.5rem; - background: var(--surface); - border-radius: 0.75rem; - box-shadow: 0 1px 2px var(--shadow); + } + + hr { + border: none; + border-top: 1.5px solid var(--border); + margin: 1.5rem 0; } .back-link { |